// 轮播图部分 通过ajax请求服务器接口 获取数据
$(() => {
    let fn = async () => {
        let res = await myAjax({
            url: "http://127.0.0.1:3000/index/banner"
        })
        console.log(res);
        let $imgUl = $(".banner>.img");//将请求的数据渲染进页面
        let bannerData = res.res;//轮播数据数组
        bannerData.forEach((item, idx) => {
            let $li = $(`<li><img src="${item.src}" alt=""></li>`);
            $imgUl.append($li);//追加到ul里面
            var listUl = document.querySelector(".list");
            var listLi = document.createElement("li");//循环时加序号
            listUl.appendChild(listLi);
        })

        // 默认显示第一张图片
        var imgUl = document.querySelector(".img")
        var imgLis = imgUl.children;
        imgUl.firstElementChild.className = "active";
        // 零个序号高亮
        var listUl = document.querySelector(".banner>.list");
        // var listLis = document.querySelectorAll(".list>li");
        var listLis = listUl.children;
        listLis[0].className = "high";

        // 变量记录当前正显示的图片索引
        var n = 0;
        function auto() {
            n++;
            if (n >= imgLis.length) {
                n = 0;
            }
            if (n < 0) {
                n = imgLis.length - 1;
            }
            // 图片排他
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = "";
            }
            imgLis[n].className = "active";
            // 序号排他
            for (var j = 0; j < listLis.length; j++) {
                listLis[j].className = "";
            }
            listLis[n].className = "high";
        }
        // 定时器轮播
        var timer = setInterval(auto, 2000);
        // 鼠标移入停止轮播 移除继续
        var banner = document.querySelector(".banner");
        banner.onmouseover = function () {
            clearInterval(timer);
        }
        banner.onmouseout = function () {
            timer = setInterval(auto, 2000);
        }
        // 点击序号 切换对应的图片
        for (var k = 0; k < listLis.length; k++) {
            listLis[k].idx = k;
            listLis[k].onclick = function () {
                n = this.idx - 1;
                auto();
            }
        }
        // 点击箭头 切换上下图片
        var spans = document.querySelectorAll(".banner>span");
        spans[0].onclick = function () {
            n = n - 2;
            auto();
        }
        spans[1].onclick = function () {
            auto();
        }
        //获取数据渲染同步课程
        let syncData = await myAjax({
            url: "http://127.0.0.1:3000/index/courses",
            data: {
                type: 1
            }
        })
        console.log(syncData);
        let syncRenderData = syncData.res;//渲染的数据
        let $syncUl = $("#sync");//获取容器
        syncRenderData.forEach((item, idx) => {//循环数据
            let $li = $(`<li>
            <div class="top">
                <span class="rj">${item.type_name}</span>
                <img src="${item.src}" alt="" class="m">
                <p>1100人在学习</p>
            </div>
            <div class="bottom">
                <div class="left">
                    <span>${item.title}</span>
                    <span class="time">${item.intro}</span>
                </div>
                <div class="right">免费学习</div>
            </div>
        </li>`)
            $syncUl.append($li);//追加
        })
        //获取在线测试
        let onlineData = await myAjax({
            url: "http://127.0.0.1:3000/index/courses",
            data: {
                type: 2
            }
        })
        console.log(onlineData);
        let onlineRenderData = onlineData.res;
        let $onlineUl = $("#online");
        onlineRenderData.forEach((item, idx) => {
            let $li = $(`<li>
            <div class="top">
                <span class="rj">${item.area_name}</span>
                <img src="./img/index/test1.png" alt="" class="m">
                <p>
                    <span>1100人已考试</span>
                    <span>${item.grade_name}</span>
                </p>
            </div>
            <div class="bottom">
                <div class="left">
                    <span>${item.intro}</span>
                </div>
                <div class="right">去考试</div>
            </div>
        </li>`)
            $onlineUl.append($li);
        })
        //精品课程
        let topData = await myAjax({
            url: "http://127.0.0.1:3000/index/courses",
            data: {
                type: 3
            }
        })
        console.log(topData);
        let topRenderData = topData.res;
        let $topUl = $("#tqa");
        topRenderData.forEach((item, idx) => {
            let $li = $(`<li>
            <div class="top">
                <span class="rj">${item.area_name}</span>
                <img src="./img/index/good_banner1.png" alt="" class="m">
                <p>1100人在学习</p>
            </div>
            <div class="bottom">
                <div class="left">
                    <span>${item.title}</span>
                    <span class="time">${item.category_name}</span>
                </div>
                <div class="right">免费学习</div>
            </div>
        </li>`)
            $topUl.append($li);
        })
    }
    fn();


})